<template>
  <div class="selector">
    <!--导航菜单-->
    <el-header class="xuanfu">

      <el-row class="headerselect">
        <el-col>
          <el-menu :default-active="activeIndex" router
                   class="el-menu-demo" mode="horizontal" @select="handleSelect">

            <el-menu-item index="/blogs">
              首页
            </el-menu-item>

            <el-menu-item index="/grounds">
              匿名广场
            </el-menu-item>

            <el-menu-item index="/blog/add">
              发帖
            </el-menu-item>

            <el-menu-item index="/hotfavorites">
              热门收藏夹
            </el-menu-item>

            <el-menu-item index="/hotwebs">
              热门窗口
            </el-menu-item>

            <el-menu-item index="/userhome">
              用户中心
            </el-menu-item>

            <el-menu-item index="/manage2/userManage" v-isAdminShow>
              管理员
            </el-menu-item>
            <el-menu-item index="/apps" v-isAdminShow>
              聊天
            </el-menu-item>

            <slot>
              <div class="userslot">
                <div v-show="!hasLogin">
                  <span><el-link :underline="false" type="primary" href="/#/login"><h4>登录</h4></el-link></span>
                  <span><el-divider direction="vertical"></el-divider> </span>
                  <span><el-link :underline="false" type="primary" href="/#/register"><h4>注册</h4></el-link></span>
                </div>

                <div v-show="hasLogin">
                  <span @click="toUser">
                    <el-avatar :src="avatarSrc"
                               class="mavatar" size="small">
                    </el-avatar>
                  </span>
                        <span><el-link type="primary" @click="logout"><h4>退出登录</h4></el-link></span>
                </div>
              </div>
            </slot>

          </el-menu>


        </el-col>
      </el-row>


    </el-header>
    <br><br>
  </div>
</template>

<script>
export default {
  name: "HeaderSelector",
  data() {
    return {
      //默认高亮选项
      activeIndex: this.$route.path,

      hasLogin: false,

      avatarSrc: '',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    logout() {
      const _this = this
      _this.$axios.get("/logout", {
        headers: {"Authorization": localStorage.getItem("token")}
      }).then(res => {
        _this.$store.commit("REMOVE_INFO")
        // this.hasLogin = false
        // this.user.username = '请先登录'
        // this.avatar = ''
        _this.$router.push("/")
        // 这里有bug  我在blogs页面 logout 又push到/blog   Navigating to current location ("/blogs") is not allowed
        //解决办法： https://blog.csdn.net/weixin_43606809/article/details/103040805


        _this.hasLogin = false

        //发现图片不能刷新  手动
        location.reload();
      })
    },

    toUser: function () {
      this.$router.push("/userHome")
    },

  },


  created() {
    //钩子函数 不要放在methods中
    var userinfo = this.$store.getters.getUser;
    console.log(userinfo + "1");
    //报错修改
    if (userinfo != null) {
      //如果登录了的话
      if (userinfo.username != null) {

        //初始化加载用户头像
        this.avatarSrc = userinfo.avatar

        this.hasLogin = true
      }
    }
  }
}
</script>

<style scoped>
/*消除router-link下划线*/
a {
  text-decoration: none;
}

.selector {
  /*width:1860px;*/
}

.router-link-active {
  text-decoration: none;
}


.lr {
  text-align: right;
}

.mavatar {
  position: relative;
  right: 10px;
  top: 10px;
}

.xuanfu {
  height: 70px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 2;
}

.userslot {
  text-align: right;
  margin-top: 1px;
}
</style>
